<template>
	<!--商品讲解中组件-->
	<div class="product-warp">
		<div :class="['explainDiv', isLandscapeLive ? '' : 'explainDiv-h', hiddenClass]" ref='explainDiv' @click="clickExplanation">
			<div class="live-left">				
				<img :src="`${productObj.imgUrl}?x-oss-process=image/resize,m_fixed,h_90,w_90`" alt="">
				<p>讲解中</p>
			</div>
			<div class="live-right">
				<p class="title">{{ productObj.title }}</p>
				<p class="detail">
					<!-- 1 实物商品 -->
					<template v-if="productObj.type == 1">
						<p class="text-info">
							<span class="price">{{ productObj.price }}
								<span v-if="productObj.priceUnit">/{{ productObj.priceUnit }}</span>
							</span>
							<!-- <span class="line-price">{{ productObj.priceLine }}</span> -->
						</p>
					</template>
					<!-- 2理财产品 -->
					<template v-else-if="productObj.type == 2">
						<!-- 1 收益率 2 起购价 -->
						<p class="text-info" v-if="productObj.proPriceType == '1'">
							<span class="price">{{ productObj.proProfitRate }}</span>
							<span class="gray-text" v-if="productObj.proProfitRefType != 1">{{
								productObj.proProfitRefType | filterText(v) }}</span>
						</p>
						<p class="text-info" v-else-if="productObj.proPriceType == '2'">
							<span class="price">{{ productObj.proPriceInit }}</span>
							<span class="gray-text">{{ productObj.proPriceInitDesc }}</span>
						</p>
					</template>
					<!-- 3虚拟商品 -->
					<template v-else>
						<p class="text-info">
							<span class="price">{{ productObj.price }}</span>
							<span class="gray-text">{{ productObj.priceDesc }}</span>
						</p>
					</template>
					<span class="close" @touchstart.stop.prevent="close" @click="close">收起</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
import { shoppingRiskTip, isCheckUserAuthShoppingPop ,shoppingDotNum} from '@/util/api.js'
export default {
	props:{
		productObj:Object,
		roomInfo:Object,
		isLandscapeLive:{ // 是否是横屏
			type:Boolean,
			default:false
		}
	},
	data() {
		return {
			hiddenClass:'',
			roomId: this.$route.params.roomid,
		}
	},
	filters: {
		filterText(type, v) {
			const yieldForm = [, , '7日年化', '近3月年化', '近一年年化', '成立以来年化', '业绩比较基准'];//收益对照表 2 7日年化 3 近3月年化 4近一年年化 5 成立以来年化 6 业绩比较基准 7 自定义
			const arrFilter = [2, 3, 4, 5, 6, 7]
			if (arrFilter.includes(type)) {
				if (type == 7) {
					return v.data.proProfitRef
				} else {
					return yieldForm[type]
				}
			} else {
				return ''
			}
		}
	},
	methods: {
		// 点击商品列表里面的某个商品链接
		toOrder(item) {
			fun.shoppingLink(item)
        },
		clickExplanation(){
			// 神策打点（商品 - 直播 - 讲解中 - 横屏/竖屏）
			const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
			$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
				page_name: `直播${['预告', '详情'][roomStatus]}页`,
				user_nickname: this.$store.state.userInfo.nickname,
				live_room_id: roomId,
				live_room_name: title,
				live_room_status: ['预告', '直播中'][roomStatus],
				live_room_creator: anchor,
				function_name: '点击弹屏产品',
			});
			//this.clickShoppingLink(this.productObj.id, this.productObj.goodsLink)
			this.getGoodsRiskTip(this.productObj)
		},
		//购买风险弹窗内容
		async getGoodsRiskTip(item) {
				const {id} = item ;
				//goods:{商品ID}:{type,1-直播,2-回看}:{roomId/videoId}
				const params = {
				'id':`goods:${id}:${window.location.href.includes('liveRoom') ? 1 : 2}:${this.$route.params.roomid ||this.$route.params.id}`,
				'plat': fun.getPlatform()
				}
				shoppingDotNum(params)
				try {
					const msgData = await shoppingRiskTip(this.roomId, 0)
					//enPopUpWin 是否需要验证
					const { code, data } = msgData.data;
					if (code === '000000') {
					if (data) {
						const buyRiskObj = data;
						const { enPopUpWin } = data;
						if (enPopUpWin) {//true 开
						//查询是否授权过
						const msg = await isCheckUserAuthShoppingPop(this.roomId, 0);
						const { code, data:dataBoo } = msg.data
						if (code === '000000') {
							if (dataBoo) {//已经授权
							this.toOrder(item)
							} else {//未授权
							this.$emit('formChildMsg', {
								type: 'openBuyRisk',
								data: { buyRiskObj, shoppingLinkInfo:{item}}
							})
							}
						}
						} else {
						this.toOrder(item)
						}
					} else {
						this.toOrder(item)
					}
					}
				} catch (error) {

				}
    },
		close(){
			this.hiddenClass = this.isLandscapeLive ? 'hideSlide' : 'hideSlideH'
			setTimeout(()=>{
				this.$emit('getProduct',false)
			},200)
		}
	}
}
</script>

<style scoped="scoped" lang="less">
.explainDiv {
	position: absolute;
	z-index: 1010;
	bottom: 100px;
	left: 0px;
	width: 508px;
	height: 182px;
	padding-left: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	background: url('../../../assets/images/explain_bg.png') no-repeat;
	background-size: 100% 100%;
	border-radius: 5px;
	animation: myfirst 0.2s;
	-webkit-animation: myfirst 0.2s;
	animation-fill-mode: forwards;
}

.explainDiv-h {
	height: 163px;
	width: 540px;
	bottom: 130px;
	left: 0px;
	padding-left: 43px;
	padding-top: 25px;
	align-items: flex-start;
	background: url('../../../assets/images/explain_bg1.png') no-repeat;
	background-size: 540px 164px;
	animation: myfirstH 0.2s;
	-webkit-animation: myfirstH 0.2s;
	animation-fill-mode: forwards;

}

.explainDiv-h .live-right .title {
	height: 60px;
	line-height: 30px;
	margin-bottom: 18px;
	color: rgba(51, 51, 51, 1);
	font-weight: 500;

}

@keyframes myfirst {
	0% {
		height: 30px
	}

	50% {
		height: 91px;
	}

	100% {
		height: 182px;
	}
}

.hideSlide {
	animation: hideSlide 0.2s;
	-webkit-animation: hideSlide 0.2s;
	animation-fill-mode: forwards;
	/*当动画完成时，动画会停留在最后一帧。*/
}

@keyframes hideSlide {
	0% {
		height: 182px;
	}

	50% {
		height: 91px;
	}

	100% {
		height: 0px;
	}
}

@keyframes myfirstH {
	0% {
		height: 30px
	}

	50% {
		height: 81px;
	}

	100% {
		height: 163px;
	}
}

.hideSlideH {
	animation: hideSlideH 0.2s;
	-webkit-animation: hideSlideH 0.2s;
	animation-fill-mode: forwards;
	/*当动画完成时，动画会停留在最后一帧。*/
}

@keyframes hideSlideH {
	0% {
		height: 143px;
	}

	50% {
		height: 81px;
	}

	100% {
		height: 0px;
		bottom: -20px;
	}
}

.live-left {
	position: relative;
	height: 108px;
	width: 108px;
	margin-right: 8px;
	border-radius: 3px;
}

.live-left img {
	position: absolute;
	height: 108px;
	width: 108px;
	border-radius: 3px;
}

.live-left p {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 0px 0px 3px 3px;
	font-size: 22px;
	font-weight: 500;
	color: #FFFFFF;
}

.live-left p::before {
	content: '';
	height: 26px;
	width: 26px;
	background: url('../../../assets/images/live.gif') no-repeat;
	background-size: 100% 100%;
}

.live-right {
	width: 341px;
}

.live-right .title {
	margin-bottom: 16px;
	font-size: 26px;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

.live-right .detail {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	.text-info {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.price {
		width: 200px;
		font-size: 26px;
		font-weight: 500;
		color: rgba(249, 86, 27, 1);
	}

	.gray-text {
		font-size: 20px;
		font-weight: 400;
		color: #999999;
		margin-left: 5px;

	}
}



.detail .close {
	z-index: 1011;
	width: fit-content;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 26px;
	font-weight: 400;
	width: 90px;
	color: rgba(255, 133, 133, 1);
}

.explainDiv-h .detail .close {

	color: rgba(153, 153, 153, 1);
}

.detail .close::before {
	content: '';
	height: 30px;
	width: 30px;
	margin-right: 5px;
	background: url('../../../assets/images/drop_down.png') no-repeat;
	background-size: 100% 100%;
}

.explainDiv-h .detail .close::before {
	background: url('../../../assets/images/drop_down1.png') no-repeat;
	background-size: 100% 100%;

}
</style>
